<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>my-table</title>
        <style>
            html,
            body {
                margin: 0;
                padding: 0;
            }
            .my-table {
                width: 100%;
                overflow: auto;
                display: grid;
                grid-template-columns: repeat(7, 1fr);
                position: relative;
            }
            .cell-item {
                padding: 4px;
            }
            .cell-item.th {
                position: sticky;
                top: 0;
                background-color: aqua;
                z-index: 1;
            }
            .cell-item.td {
                background-color: #fff;
            }
            .cell-item.fixed-right {
                position: sticky;
                right: 0;
            }
            .my-table.un-top .cell-item.th::after {
                content: '';
                display: block;
                position: absolute;
                bottom: -10px;
                left: 0;
                height: 10px;
                width: 100%;
                box-shadow: inset 0 10px 10px -10px #ccc;
            }
            .my-table.un-right .cell-item.fixed-right::before {
                content: '';
                display: block;
                position: absolute;
                left: -10px;
                top: 0;
                width: 10px;
                height: 100%;
                box-shadow: inset -10px 0 10px -10px #ccc;
            }
            .refresh-flag .tips,
            .load-flag .tips {
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: #ccc;
                color: #666;
                font-size: 12px;
                overflow: hidden;
            }
        </style>
    </head>

    <body>
        <div id="app">
            <div class="my-table" ref="tableRef">
                <div class="cell-item th" style="width: 40px">ID</div>
                <div class="cell-item th" style="width: 100px">Name</div>
                <div class="cell-item th" style="width: 100px">Age</div>
                <div class="cell-item th" style="width: 100px">Gender</div>
                <div class="cell-item th" style="width: 100px">Salary</div>
                <div class="cell-item th" style="width: 200px">Address</div>
                <div class="cell-item th fixed-right" style="width: 120px">Opertions</div>
                <div class="refresh-flag" style="grid-column-start: span 7">
                    <div class="tips" style="height: 0"></div>
                </div>
                <template v-for="a in tableData">
                    <div class="cell-item td">{{a.id}}</div>
                    <div class="cell-item td">{{a.name}}</div>
                    <div class="cell-item td">{{a.age}}</div>
                    <div class="cell-item td">{{a.gender}}</div>
                    <div class="cell-item td">{{a.salary}}</div>
                    <div class="cell-item td">{{a.address}}</div>
                    <div class="cell-item td fixed-right">
                        <button>编辑</button>
                    </div>
                </template>
                <div class="load-flag" style="grid-column-start: span 7">
                    <div class="tips" style="height: 30px"></div>
                </div>
            </div>
            <p>
                <div>refreshing: {{refreshing}}</div>
                <div>loading: {{loading}}</div>
                <div>hasMore: {{hasMore}}</div>
                <div>pageNumber: {{pageNumber}}</div>
                <div>pageSize: {{pageSize}}</div>
            </p>
            <p id="remark"></p>
        </div>

        <script src="js/vue.min.js"></script>
        <script src="js/MyTable.js"></script>
        <script>
            let n = 1
            new Vue({
                el: document.getElementById('app'),
                data() {
                    return {
                        tableData: [],
                        pageSize: 10,
                        pageNumber: 1,
                        hasMore: true,
                        refreshing: false,
                        loading: false,
                        myTableInstance: null,
                    }
                },
                mounted() {
                    this.myTableInstance = new MyTable(this.$refs.tableRef, {
                        maxHeight: 300,
                        refresh: this.refresh,
                        load: this.load,
                    })
                    this.fetchData()
                },
                methods: {
                    async refresh() {
                        console.log('refresh')
                        n = 1
                        this.pageNumber = 1
                        this.refreshing = true
                        this.myTableInstance.setRefreshing(true)
                        await this.fetchData()
                        this.myTableInstance.setRefreshing(false)
                        this.refreshing = false
                    },
                    async load() {
                        console.log('load')
                        this.pageNumber += 1
                        this.loading = true
                        this.myTableInstance.setLoading(true)
                        await this.fetchData()
                        this.myTableInstance.setLoading(false)
                        this.loading = false
                    },
                    async fetchData() {
                        console.log('fetchData' + this.pageNumber)
                        await new Promise(resolve => setTimeout(resolve, 1000))
                        const list = []
                        for (let i = 0; i < 10; i++) {
                            const id = n++

                            list.push({
                                id,
                                name: '张三' + id,
                                age: id,
                                gender: id % 2 === 0 ? '男' : '女',
                                salary: 5000 + id,
                                address: '北京市海淀区西二旗' + id,
                            })
                        }
                        if (this.pageNumber === 1) {
                            this.tableData = list
                        } else {
                            this.tableData = this.tableData.concat(list)
                        }
                        const hasMore = this.tableData.length < 30
                        this.hasMore = hasMore
                        this.myTableInstance.setHasMore(hasMore)
                    },
                },
            })
        </script>
    </body>
</html>
